<template>
  <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <transition name="slide-fade"><el-breadcrumb-item v-if="isfirst">{{isFirstbread.auth_name}}</el-breadcrumb-item></transition>
      <transition name="slide-fade"><el-breadcrumb-item v-if="issecond">{{isSecondbread.auth_name}}</el-breadcrumb-item></transition>
  </el-breadcrumb>
</template>

<script>
import { type } from '@/utils/commonFun'
export default {
  computed: {
    isFirstbread() {
      return this.$store.state.bread.Firstbread
    },
    isSecondbread: {
      get: function () {
        return this.$store.state.bread.Secondbread
      },
      set: function () {

      }
    },
    currMenuPath() {
      return this.$store.state.aside.clickMenuPath
    }
  },
  watch: {
    isFirstbread: function(val) {
      this.isfirst = false
      if (Object.keys(val).length > 0) {
        this.$nextTick(() => {
          this.isfirst = true
        })
      }
    },
    isSecondbread: function(val) {
      this.issecond = false
      if (Object.keys(val).length > 0) {
        this.$nextTick(() => {
          this.issecond = true
        })
      }
    },
    currMenuPath: function(val) {
      // 观察当前url变化, 触发面包屑change
      this.changeDashbread()
    }
  },
  mounted() {
    this.changeDashbread()
  },
  data() {
    return {
      isfirst: false,
      issecond: false
    }
  },
  methods: {
    changeDashbread() {
      const isTruePath = this.$store.state.aside.clickMenuPath
      const adminRules = this.$store.state.aside.menuRulesState // this.$localStorage.get('rules', true)

      if (adminRules === '' || adminRules === undefined) return
      // 获取父级栏目
      const firstbread = adminRules.filter(value => {
        return value.path === isTruePath
      })

      if (type(firstbread) === 'array' && firstbread.length > 0) {
        this.$store.commit('activeTabMutations', firstbread[0])
      } else {
        // 初始化面包屑
        this.$store.dispatch('initBread')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.el-breadcrumb {
  margin-bottom: 0;
  height: 20px;
  line-height: 20px;
}
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all .6s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(40px);
  opacity: 0;
}
</style>
